<template>
	<view @tap="goMy">
		<view class="main">
			<view class="main-inner">
				<view class="imgouter">
					<image src="../../static/vip/man.png" class="img" mode=""></image>
				</view>
				<view class="">
					<view class="grey">
						<view>欢迎你,新朋友</view>
						<view class="right">开通</view>
					</view>
					<view class="white">8元开通VIP，畅学明初独家菜谱</view>
				</view>
			</view>
			<view class="main-footer">
				<view>
					<image class="footer-img" src="https://s3.bmp.ovh/imgs/2021/08/f241b173c9ccddf7.png" mode="">
					</image>
					<view class="img-size">名厨课程</view>
				</view>
				<view>
					<image class="footer-img" src="https://s3.bmp.ovh/imgs/2021/08/a616e75f0d529533.png" mode="">
					</image>
					<view class="img-size">名厨课程</view>
				</view>
				<view>
					<image class="footer-img" src="https://s3.bmp.ovh/imgs/2021/08/1a929e373ebdf55e.png" mode="">
					</image>
					<view class="img-size">名厨课程</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		methods:{
			goMy(){
				uni.navigateTo({
					url:'./goLogin/goLogin/goLogin'
				})
			}
		}
	}
	
</script>

<style scoped>
	.main {

		width: 710rpx;
		margin: 14rpx auto;
		margin-top: 14rpx;
		background-image: linear-gradient(90deg, rgb(35, 36, 44) 0%, rgb(49, 51, 60) 20%, rgb(65, 67, 77) 50%, rgb(45, 46, 54));
		border-radius: 10rpx;
	}

	.main-inner {
		padding-top: 32rpx;
		display: flex;
		
		align-items: center;

	}

	.imgouter {
		width: 140rpx;
		height: 140rpx;
		background-color: #FFFFFF;
		/* margin-top: 32rpx; */
		margin-left: 32rpx;
		text-align: center;
		border-radius: 46%;
	}

	.img {
		width: 120rpx;
		height: 120rpx;
		margin-top: 5px;
	}

	.grey {
		color: rgb(147, 147, 147);
		font-size: 14px;
		line-height: 20rpx;
		margin-left: 25rpx;
		display: flex;
	}

	.white {
		color: #FFFFFF;
		margin-left: 25rpx;
		font-size: 13px;
		position: relative;
		top: 5px;
	}

	.right {
		transform: translate(95px, -10px);
		background-image: linear-gradient(rgb(230, 181, 150) 0%, rgb(232, 186, 156) 10%, rgb(239, 205, 178));
		width: 104rpx;
		height: 34rpx;
		line-height: 34rpx;
		text-align: center;
		border-radius: 15rpx;
		color: black;
		font-size: 12px;
	}

	.main-footer {
		/* border: 1px solid red; */
		height: 110rpx;
		margin-top: 60rpx;
		background-image: url('../../static/vip/bg.png');
		background-size: cover;
		display: flex;
		justify-content: space-around;
		align-items: center;
		text-align: center;
		line-height: 40rpx;
		color: rgb(238, 203, 135);
		font-size: 14px;
		background-repeat: no-repeat;
	}

	.footer-img {
		width: 50rpx;
		height: 50rpx;
	}

	.img-size {
		width: 55;
		height: 12;
		borderStyle: "solid";
		borderWidth: 1;
		borderColor: "#000000";
	}
</style>
